<template>
  <div class="wrapper">
    <div class="search">
      <div class="search__back" @click="handleClick">
        <div class="iconfont">&#xe600;</div>
      </div>
      <div class="search__content">
        <div class="search__content__icon iconfont">&#xe660;</div>
        <input class="search__content__input" placeholder="请输入商品名称" />
      </div>
    </div>
    <ShopInfo :item="data" />
    <Content />
    <Cart />
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from 'vue-router'
import ShopInfo from './components/ShopInfo.vue'
import Content from "./components/Content.vue"
import Cart from "./components/Cart.vue"
const router = useRouter()
const handleClick = () => {
  router.push({ name: 'Home' })
}
const data = ref({ title: '沃尔玛', img: 'http://www.dell-lee.com/imgs/vue3/near.png', tags: ['月售1万+', '起送20', '基础运费￥5'], highlight: 'VIP尊享满89元减4元运费全（每月3张）' },)
</script>

<style lang="scss" scoped>
@import '../../css/variables.scss';
@import '../../css/mixins.scss';

.wrapper {
  padding: 0 0.18rem;
}

.search {
  display: flex;
  margin: 0.14rem 0 0.04rem 0;
  height: 0.32rem;

  &__back {
    width: 0.3rem;
    height: 0.32rem;
    line-height: 0.32rem;
    color: #b6b6b6;
  }

  &__content {
    display: flex;
    flex: 1;
    line-height: 0.32rem;
    background-color: $search-bgColor;
    border-radius: 0.16rem;

    &__icon {
      width: 0.44rem;
      color: $search-fontColor;
    }

    &__input {
      display: block;
      width: 100%;
      padding-right: 0.2rem;
      line-height: 0.32rem;
      border: none;
      outline: none;
      background: none;
      color: $content-fontColor;
      font-size: 0.14rem;

      &::placeholder {
        color: $content-fontColor;
      }
    }
  }
}
</style>
